<template>
	<view class="select-gif-alert">
		<view class="navi">
			<view style="width: 200px;">
				<uni-easyinput v-model="name" prefixIcon="search" :styles="inputStyle" placeholder="礼物名称模糊搜索" primaryColor="#9393b8" @input="nameChanged"/>
			</view>
			<view style="width: 200px; margin-left: 10px;">
				<uni-easyinput v-model="coins" prefixIcon="search" :styles="inputStyle" placeholder="礼物票数搜索" primaryColor="#9393b8" @input="coinsChanged"/>
			</view>
		</view>
		
		<view class="gift-items">
			<scroll-view scroll-y class="scroll">
				
				<view class="contents">
					<block v-for="(gift, index) in filGifts" :key="gift.source_id">
						<view class="gift-item" :style="{marginBottom: (index + 1) % 2 ? '10px' : 0}" @click="clickGift(gift)">
							<view class="icont">
								<image :src="'/static/gifts_imgs/' + gift.source_id + '.png'" mode="" style="width: 100%; height: 100%;"></image>
							</view>
							<view class="icon-name">
								{{gift.name}}
							</view>
							<view class="icon-coins">
								{{gift.coins}}
							</view>
						</view>
						<view v-if="(index + 1) % 8" style="width: 10px;"></view>
					</block>
				</view>
				
			</scroll-view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				filGifts: [],
				gifts: [],
				inputStyle: {
					color: '#b3b3de',
					backgroundColor: '#4b4b5d',
					disableColor: '#383846',
					borderColor: '#73738f'
				},
				name: '',
				coins: '',
				from: ''
			}
		},
		onLoad(opt) {
			this.from = opt.from
			const localData = require('@/static/gift.json')
			for (let gift of localData.data.gift_tab_panel_map[1].gifts) {
				this.gifts.push({
					source_id: gift.source_id,
					coins: gift.coins,
					name: gift.name,
					icon: '/static/gifts_imgs/' + gift.source_id + '.png'
				})
			}
			for (let gift of localData.data.gift_tab_panel_map[2].gifts) {
				this.gifts.push({
					source_id: gift.source_id,
					coins: gift.coins,
					name: gift.name,
					icon: '/static/gifts_imgs/' + gift.source_id + '.png'
				})
			}
			
			this.gifts.sort((a, b) => {
				return a.coins - b.coins
			})
			
			this.filGifts = this.gifts

			// for (let gift of this.gifts) {
			// 	window.electronAPI.saveGift(gift.icon, gift.source_id + ".png")
			// }
		},
		methods: {
			
			/**
			 * 对礼物数组进行模糊查询
			 * @param {Array} gifts 礼物数组
			 * @param {String} keyword 搜索关键词
			 * @param {Object} options 配置选项
			 * @param {Boolean} options.caseSensitive 是否区分大小写(默认false)
			 * @param {Boolean} options.exactMatch 是否精确匹配(默认false)
			 * @return {Array} 匹配的礼物数组
			 */
			fuzzySearchGifts(gifts, keyword, options = {}) {
				if (!keyword || !gifts || !gifts.length) return this.gifts
				const { caseSensitive = false, exactMatch = false } = options
				// 处理大小写
				const searchText = caseSensitive ? keyword : keyword.toLowerCase()
			  
				return gifts.filter(gift => {
					if (!gift.name) return false
					const name = caseSensitive ? gift.name : gift.name.toLowerCase()
					if (exactMatch) {
					  return name === searchText
					} else {
					  return name.includes(searchText)
					}
				})
			},
			
			nameChanged(e) {
				this.filGifts = this.fuzzySearchGifts(this.gifts, e)
			},
			
			coinsChanged(e) {
				if (e == '') {
					this.filGifts = this.gifts
					return
				}
				this.filGifts = this.gifts.filter(gift => {
					console.log(gift.coins == e)
					return gift.coins == e
				})
			},
			
			clickGift(gift) {
				window.electronAPI.selectGift(gift, this.from)
			}
		}
	}
</script>

<style scoped>
	
	::v-deep ::-webkit-scrollbar {
	  display: block !important; /* 强制显示滚动条 */
	  width: 2px;                /* 滚动条的宽度 */
	  height: 2px;              /* 滚动条的高度 */
	}
	
	::v-deep ::-webkit-scrollbar-thumb {
	  background-color: #49495a;   /* 滚动条滑块的颜色 */
	  border-radius: 2px;      /* 滚动条滑块的圆角 */
	}
	
	::v-deep ::-webkit-scrollbar-track {
	  background-color: #272730; /* 滚动条轨道的颜色 */
	  border-radius: 10px;       /* 滚动条轨道的圆角 */
	}
	
	.select-gif-alert {
		width: 100%;
		height: 100vh;
		background-color: #272730;
		display: flex;
		flex-direction: column;
	}
	
	.navi {
		display: flex;
		margin: 10px;
	}
	
	.gift-items {
		margin: 0 10px 10px 10px;
		/* background-color: orange; */
		width: calc(100% - 20px);
		height: 1px;
		flex: 1;
	}
	
	.contents {
		display: flex;
		flex-wrap: wrap;
	}
	
	.scroll {
		width: 100%;
		height: 100%;
	}
	
	.gift-item {
		width: calc((100vw - 20px - 72px) / 8);
		height: calc((100vw - 20px - 72px) / 8 + 30px);
		line-height: 150px;
		background-color: #4b4b5d;
		color: '#b3b3de';
		border: #73738f 1px solid;
		box-sizing: border-box;
		border-radius: 3px;
		display: flex;
		flex-direction: column;
		align-items: center;
		
	}
	
	.gift-item:hover {
		cursor: pointer;
		background-color: #444455;
	}
	
	.gift-item:active {
		opacity: 0.9;
	}
	
	.icont {
		width: calc((100vw - 20px - 72px) / 8 * 0.8);
		height: calc((100vw - 20px - 72px) / 8 * 0.8);
		display: flex;
	}
	
	.icon-name {
		color: wheat;
		font-size: 12px;
		height: 14px;
		display: flex;
		align-items: center;
		margin-top: 3px;
	}
	
	.icon-coins {
		font-size: 13px;
		height: 13px;
		display: flex;
		align-items: center;
		margin-top: 3px;
		color: white;
		/* height: 0px; */
		/* margin-top: 2px; */
	}
	
</style>
